<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2025-06-20 19:27:10
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-08-20 16:27:19
 * @FilePath: /XMate-h5/src/views/orderVisit/customerListView.vue
 * @Description: 
 * 
 * Copyright (c) 2025 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <div class="flex flex-col h-screen">
    <div v-if="isMac() && isElectron()" class="mac-titlebar"></div>
    <van-nav-bar
      v-if="isMac() || isElectron()"
      title="参会人员"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="flex flex-row items-center mb-4 px-5 w-full justify-between">
      <van-search
        placeholder="请输入搜索关键词"
        shape="round"
        class="flex-auto"
        show-action
        @click-input="emits('onClickInput')"
      >
        <template #action>
          <div class="text-yxt-blue" @click="onClickCreate">新建</div>
        </template>
      </van-search>
    </div>
    <emptyView v-if="!attendList.length" :des="'暂无客户人员'" />
    <div v-else class="flex-auto overflow-auto bg-red-30 flex flex-col justify-between">
      <div class="overflow-y-auto flex-auto">
        <attendInfoCell
          v-for="(item, index) in attendList"
          :key="index"
          :item="item"
          attend-type="customer"
          @onChange="checkStatusOnChange"
        />
      </div>
      <bottomView
        v-if="attendList.length > 0"
        v-model:checked="checkAll"
        @change="onStatusChange"
        @onConfirm="onConfirm"
        :count="chooseNum"
      />
    </div>
  </div>
</template>

<script setup>
import { computed, ref, defineEmits, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useOrderVisitStore } from "@/store";
import emptyView from "@/components/emptyView.vue";
import attendInfoCell from "./components/attendInfoCell.vue";
import bottomView from "./components/bottomView.vue";
import { isMac, isElectron } from "@/utils/platformTool";

const store = useOrderVisitStore();
const route = useRoute();
const router = useRouter();
const attendList = computed(() => store.currentListData);
const emits = defineEmits(["onClickInput"]);
const checkAll = ref(false);

onMounted(() => {
  store.setCurrentType(0);
  loadData();
});

function onClickLeft() {
  console.log("onClickLeft");
  router.back();
}
async function loadData() {
  const { customerId } = route.query;
  const preSelected = store.customerAttendList.filter((v) => v.checked);

  await store.loadCustomerAttendAction(customerId);
  attendList.value.forEach((item) => {
    item.checked = preSelected.some((v) => v.name === item.name);
  });
}

function onStatusChange(v) {
  attendList.value.forEach((item) => (item.checked = v));
}

const chooseNum = computed(() => attendList.value.filter((v) => v.checked).length || 0);

function checkStatusOnChange(v, item) {
  if (!v) {
    checkAll.value = false;
    // 操作store
    store.removeListFromAttendList([item]);
  }
  checkAll.value = attendList.value.length === chooseNum.value;
}

function onClickCreate() {
  router.push({
    name: "createAttend",
    query: {
      name: route.query.name,
    },
  });
}

function onConfirm() {
  router.back();
}
</script>

<style lang="less" scoped></style>
